<template>
    <el-dialog style="z-index: 20000006 !important;" v-model="visible" title="添加表单项" width="500" align-center>
        <!-- 自定义表单编辑 -->
        <el-form ref="formDateRef" :model="formDate" :rules="formDateRules" label-position="top">
            <el-form-item label="表单项名称" prop="name">
                <el-input v-model="formDate.name"></el-input>
            </el-form-item>
            <el-form-item label="表单项类型" prop="type">
                <el-radio-group v-model="formDate.type">
                    <el-radio :value="0">文本框</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否必填" prop="required">
                <el-radio-group v-model="formDate.required">
                    <el-radio :value="false">是</el-radio>
                    <el-radio :value="true">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="addOrUpdate">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { TemplateValue } from '@/types/publishContest'
import type { FormRules } from 'element-plus'
import { ElInput, ElMessage } from 'element-plus'

const emit = defineEmits(['syncAdd'])

let visible = ref(false)
let list = ref<TemplateValue[]>([])
let formDateRef = ref()

const formDate = ref<TemplateValue>(
    { // 队长姓名是默认必须要有的
        name: "",
        type: 0,
        required: true,
        value: "",
        is_delete: false
    }
)
const formDateRules = reactive<FormRules<typeof formDate>>({
    name: [{ required: true, message: '请输入表单项名称', trigger: ['blur', 'change'] }],
    type: [{ required: true, message: '请选择表单项类型', trigger: ['blur', 'change'] }],
    required: [{ required: true, message: '请选择是否必填', trigger: ['blur', 'change'] }],
});
const addOrUpdate = () => {
    let storList = JSON.parse(localStorage.getItem("list") as string)
    if (storList.length > list.value.length) {
        list.value = [...storList]
    }
    formDateRef.value.validate((vali: boolean) => {
        if (vali) {
            if (is_update.value) {
                list.value.splice(currIndex.value, 1, { ...formDate.value })
                is_update.value = false
            } else {
                list.value.push({ ...formDate.value })
            }
            formDateRef.value.resetFields()
            emit('syncAdd', list.value)
        }
    })
    visible.value = false
    ElMessage.success("操作成功")
}
const deleteItem = (item: TemplateValue) => {
    let index = list.value.indexOf(item)
    list.value.splice(index, 1)
    ElMessage.success("操作成功")
}
const closeDialog = () => {
    visible.value = false; 
    formDateRef.value.resetFields()
}
let is_update = ref(false) // 标记 本次是否 更新
let currIndex = ref(-1)
const init = (item: TemplateValue) => {
    visible.value = true;
    if (item !== undefined) {
        is_update.value = true
        currIndex.value = list.value.indexOf(item)
        formDate.value = { ...item }
    }
}
const createList = (count: number, isTeam: boolean) => {
    list.value = [{
        name: isTeam?"姓名":"队长姓名",
        required: true,  // 是否必填
        type: 0,  // 类型 el-input 0  反则 el-select 1
        value: "",  // 值
        is_delete: true
    }]
    if ((count > 0) && !isTeam) {
        for (let i = 0; i < count - 1; i++) {
            let obj: TemplateValue = {
                name: `${i + 1}号队员姓名`,
                required: true,  // 是否必填
                type: 0,  // 类型 el-input 0  反则 el-select 1
                value: "",  // 值
                is_delete: true
            }
            list.value.push({ ...obj })
        }
    }
    localStorage.setItem("list", JSON.stringify(list.value))
    return list.value
}
defineExpose<{ init: Function, deleteItem: Function, list: TemplateValue[], createList: Function }>({
    init,
    deleteItem,
    list: list.value,
    createList
})
</script>